<!-- 底部导航 -->
<template>
  <div class="tabbar">
    <ul>
      <!-- 点击切换路由  -->
      <li @click="switchPath('/home')">
        <!-- 控制图片 -->
        <img :src="!$route.path.includes('/home')?imgPath[0].normal:imgPath[0].selected" alt="">
        <!-- 控制颜色 -->
        <span :class="{active:this.$route.path == '/home'}">首页</span>
      </li>
      <li @click="switchPath('/recommend')">
        <img :src="$route.path !== '/recommend'?imgPath[1].normal:imgPath[1].selected" alt="">
        <span :class="{active:this.$route.path == '/recommend'}">推荐</span>
      </li>
      <li @click="switchPath('/chat')">
        <img :src="$route.path !== '/chat'?imgPath[2].normal:imgPath[2].selected" alt="">
        <span :class="{active:this.$route.path == '/chat'}">聊天</span>
      </li>
      <li @click="switchPath('/search')">
        <img :src="$route.path !== '/search'?imgPath[3].normal:imgPath[3].selected" alt="">
        <span :class="{active:this.$route.path == '/search'}">搜索</span>
      </li>
      <li @click="switchPath('/me')">
        <img :src="$route.path !== '/me'?imgPath[4].normal:imgPath[4].selected" alt="">
        <span :class="{active:this.$route.path == '/me'}">我的</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 控制图片是否高亮显示
      imgPath: [
        {
          normal: require('./../../common/img/icon_home.png'),
          selected: require('./../../common/img/icon_home_selected.png')
        },
        {
          normal: require('./../../common/img/icon_intro.png'),
          selected: require('./../../common/img/icon_intro_selected.png')
        }, {
          normal: require('./../../common/img/icon_chat.png'),
          selected: require('./../../common/img/icon_chat_selected.png')
        },
        {
          normal: require('./../../common/img/icon_search.png'),
          selected: require('./../../common/img/icon_search_selected.png')
        }, {
          normal: require('./../../common/img/icon_mine.png'),
          selected: require('./../../common/img/icon_mine_selected.png')
        }
      ]
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  methods: {
    /**
     * 主要是把路径进去，然后进行路径的跳转，
     *
     */
    switchPath (path) {
      this.$router.replace(path)
    }
  }
}
</script>
<style lang='stylus' scoped>
/* @import url(); 引入css类 */
.tabbar {
  width 100%
  position: fixed;
  display: flex;
  bottom: 0px;
  font-size: 0.1rem;
  background #ffffff
  z-index 999;
  padding 3px 0px
  ul{
    width 100%
    display flex
  }
  li {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    color: #666;
    line-height: 1;
    img {
      width: 35%;
      margin-bottom: 2px;
    }
  }
 .active{
    color: #e02e24;
 }

}

</style>
